<template>
  <div class="app-container">
    <div class="mainBox">
      <div class="page-form" style="display: flex; align-items: center">
        <!-- <el-input v-model="modelsearch.name" placeholder="模板名称" clearable @change="modelistclick" @keyup.enter.native="modelistclick"></el-input> -->
        <el-select
          v-model="modelsearch.examName"
          placeholder="绑定考试"
          clearable
          @keyup.enter.native="modelistclick"
          @change="modelistclick"
        >
          <el-option
            v-for="item in bindexamdata"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="modelsearch.examNumberType"
          placeholder="考号类型"
          clearable
          @keyup.enter.native="modelistclick"
          @change="modelistclick"
        >
          <el-option
            v-for="item in dict.type.exam_number_type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- <el-select
          v-model="modelsearch.createdById"
          placeholder="创建人"
          @keyup.enter.native="modelistclick"
          @change="modelistclick"
          clearable
        >
          <el-option
            v-for="item in createdById"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
          >
          </el-option>
        </el-select> -->
      </div>
    </div>
    <div style="padding: 15px; background: #fff; margin-top: 20px">
      <el-table
        ref="multipleTable"
        :data="modellist"
        tooltip-effect="dark"
        style="width: 100%"
        border
        stripe
        @selection-change="handleSelectionChange"
        :header-cell-style="{
          background: '#D8E4F0',
          color: '#2A303B',
          fontWeight: '500',
        }"
        v-loading="loading"
      >
        <el-table-column align="center" type="selection" width="55">
        </el-table-column>
        <el-table-column align="center" prop="examName" label="考试名称">
        </el-table-column>
        <el-table-column align="center" label="考号类型 ">
          <template slot-scope="scope">
            {{
              getMatchedLabel(scope.row.examNumberType, "exam_number_type") ||
              "-"
            }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="考号位数"
          prop="examNumberDigits"
        >
        </el-table-column>
        <el-table-column align="center" label="创建人" prop="createdByName">
        </el-table-column>
        <el-table-column align="center" label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.createdTime ? scope.row.createdTime : "-" }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="修改人">
          <template slot-scope="scope">
            {{ scope.row.updatedByName ? scope.row.updatedByName : "-" }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="修改时间">
          <template slot-scope="scope">
            {{ scope.row.updatedTime ? scope.row.updatedTime : "-" }}
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="210">
          <template slot-scope="scope">
            <div
              style="display: flex; text-decoration: underline"
              class="scopednr"
            >
              <b
                @click="
                  bindmodel(scope.row.id, scope.row.examName, scope.row.examId)
                "
                v-if="scope.row.status == 0"
                >创建模板</b
              >
              <b
                @click="
                  createmodel(
                    scope.row.id,
                    scope.row.examName,
                    scope.row.examId
                  )
                "
                v-else
                >编辑模板</b
              >
              <b @click="editExamschool(scope.row)">编辑</b>
              <b @click="deletepulick(scope.row.id)">删除</b>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-bottom">
        <div class="examfooter">
          <div class="examFootercontent">
            <div>
              <span class="totaldata" type="primary"
                >共<i>{{ total }}</i
                >条数据,已选{{ multipleSelection.length }}条</span
              >
              <el-button
                style="margin-left: 20px"
                type="primary"
                @click="addtateobjective"
                >批量添加模板</el-button
              >
              <el-button type="danger" @click="batchDeletateobjective"
                >批量删除</el-button
              >
            </div>
            <div>
              <!-- <el-pagination
                background
                @current-change="handleCurrentChange"
                :page-sizes="[20, 50, 100]"
                @size-change="handleSizeChange"
                :page-size="pageSize"
                layout="sizes, prev, pager, next"
                :total="total"
              >
              </el-pagination> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 批量创建 -->
    <addModel
      v-if="addModelshow"
      :addModelshow="addModelshow"
      @addModelclick="addModelclick"
      :bindexamdata="bindexamdata"
      :editbatch="editbatch"
      :exammodelid="exammodelid"
      :projectId="projectId"
    ></addModel>
    <!-- 创建复用考试 -->
    <!-- <examCopy v-if="examCopyIshow" @copyexamclick="copyexamclick" :type="3"></examCopy> -->
    <!-- 绑定考试 -->
    <!-- <bindModel v-if="bindmodelshow" :nav6name="nav6name" :nav6id="nav6id" :itemcaseid="itemcaseid" :examnavid="examnavid"
      @bindmodelclick="bindmodelclick"></bindModel> -->
  </div>
</template>

<script>
import addModel from "../../components/model/batchmodel.vue";
// import examCopy from '../../../components/model/copymodel.vue'
// import bindModel from '../../../components/model/bindmodel.vue'
// import { modelItemcaselist, batchdeletemodelcard, getExamList } from '../../../api/api.js'
import {
  modellist,
  modellistdelete,
  modellistsubject,
  getteacherlist,
} from "../../api/paperinfo/paperinfo.js";
export default {
  name: "Project_templatemanagement",
  dicts: ["exam_number_type"],
  data() {
    return {
      firstLoad: true,
      modellist: [], // 表格数据
      addSchoolshow: false,
      examCopyIshow: false,
      uploadishow: false,
      passwordshow: false,
      bindmodelshow: false,
      nav6name: "",
      nav6id: "",
      multipleSelection: [],
      examnavid: "", // 添加examnavid到data中
      examcontent: null, // 添加examcontent到data中
      itemcaseid: "",
      name: "",
      bindexam: "",
      examnumtype: "",
      modeltype: "",
      createuser: "",
      options: [],
      loading: false,
      addModelshow: false,
      bindexamdata: [],
      modelsearch: {
        name: "",
        examName: "",
        examNumberType: "",
        createdById: "",
      },
      createdById: [],
      editbatch: true,
      exammodelid: "",
      total: 0,
      projectId: "",
    };
  },
  mounted() {
    this.$store.dispatch("getXmxx").then((res) => {
      this.xmxx = res;
      this.modelsearch.examId = res.id;
      this.projectId = res.id;
      this.modelistclick();
      this.addmodelsubject(res.id);
    });

    // this.createusertap();
  },
  activated() {
    if (!this.firstLoad) {
      this.modelistclick();
      this.addmodelsubject(this.xmxx.id);
    }
    this.firstLoad = false;
  },
  methods: {
    //编辑模板
    bindmodel(id, examname, examId) {
      this.$router.push(
        "/uploadhorizontalpositioning/index?templateId=" +
          id +
          "&examName=" +
          examname +
          "&examId=" +
          examId
      );
    },
    // 创建模板
    createmodel(id, examname, examId) {
      this.$router.push(
        "/uploadhorizontalpositioning/index?templateId=" +
          id +
          "&examName=" +
          examname +
          "&examId=" +
          examId
      );
    },
    //编辑
    editExamschool(row) {
      this.exammodelid = row.id;
      this.addModelshow = true;
      this.editbatch = false;
    },
    //获取创建人
    createusertap() {
      getteacherlist().then((res) => {
        console.info("res", res);
        if (res.code == 200) {
          this.createdById = res.rows;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    addmodelsubject(id) {
      // let obj={examId:1}
      this.modelsearch.examId = id;
      modellistsubject(this.modelsearch).then((res) => {
        console.info("res", res);
        if (res.code == 200) {
          this.bindexamdata = res.rows;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 根据字典值和字典类型查找对应的 label
    getMatchedLabel(value, dictType) {
      const dictList = this.dict.type[dictType] || [];
      const matchedItem = dictList.find((item) => item.value === value);
      return matchedItem ? matchedItem.label : undefined;
    },
    //批量添加模板
    addtateobjective() {
      this.addModelshow = true;
      this.editbatch = true;
    },
    addModelclick() {
      this.addModelshow = false;
      this.modelistclick(this.projectId);
    },
    //获取模板
    modelistclick() {
      let obj = {
        name: this.modelsearch.name ? this.modelsearch.name : undefined,
        examName: this.modelsearch.examName
          ? this.modelsearch.examName
          : undefined,
        examNumberType: this.modelsearch.examNumberType
          ? this.modelsearch.examNumberType
          : undefined,
        createdById: this.modelsearch.createdById
          ? this.modelsearch.createdById
          : undefined,
        projectId: this.projectId,
      };
      modellist(obj).then((res) => {
        if (res.code == 200) {
          this.modellist = res.rows;
          this.total = res.total;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //单个删除模板
    async deletepulick(id) {
      if (id.length == 0) {
        this.$message({
          message: "请选择要删除的文件",
          type: "error",
        });
        return;
      }

      try {
        await this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });

        // 调用删除接口
        const response = await modellistdelete(id); // 直接传递 id，无需数组包裹
        this.$message.success("删除成功");
        this.modelistclick(this.projectId); // 刷新列表
      } catch (error) {
        if (error !== "cancel") {
          // 用户点击取消时不需要报错
          this.$message.error("删除失败: " + error.message);
        }
      }
    },
    //批量删除
    batchDeletateobjective() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选择要删除的文件",
          type: "error",
        });
        return;
      }
      this.deletepulick(this.multipleSelection.map((item) => item.id));
    },
    //新增模板
    addmodel() {
      this.addmodelshow = true;
    },
  },
  components: {
    addModel,
  },
};
</script>

<style scoped>
.mainBox {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 15px 0;
}

.mainBox >>> .el-button {
  background: #366ef4;
  border: solid 1px #366ef4;
  height: 36px;
}

.mainBox >>> .el-input__icon {
  line-height: 36px;
}

.mainBox >>> .distpicker-address-wrapper select {
  height: 35px;
  line-height: 35px;
  border-radius: 10px;
  font-size: 14px;
  color: #999;
  border: solid 1px #dcdfe6;
}

.mainBox ul {
  display: flex;
  align-items: center;
}

.mainBox ul li {
  font-size: 14px;
  margin-right: 15px;
  padding: 0 10px;
  line-height: 36px;
  cursor: pointer;
  border-bottom: solid 2px #fff;
}

.mainBox ul li:hover,
.mainBox ul li.hover {
  color: #0052d9;
  border-bottom: solid 2px #0052d9;
}

.custom-table {
  width: 100%;
  border: 1px solid rgba(216, 228, 240, 0.34);
  border-right: none;
  border-bottom: none;
}
/* 自定义表格内部元素的样式 */
.custom-table >>> .el-table__header-wrapper th {
  background-color: #e8f0fa;
  height: 42px;
  padding: 0;
  text-align: center;
  font-weight: normal;
}
.custom-table >>> .el-table th.el-table__cell.is-leaf,
.custom-table >>> .el-table td.el-table__cell {
  border-bottom: none;
}
.custom-table >>> .el-table__row td {
  height: 42px;
  padding: 0;
  text-align: center;
  border-right: solid 1px rgba(216, 228, 240, 0.5);
  font-size: 14px;
}

.el-table .warning-row {
  background: #ffffff;
}

.el-table .success-row {
  background: #d8e4f0;
}

.el-table .el-table__cell {
  padding: 8px 0;
}

.examfooter {
  width: 100%;
  height: 54px;
  left: 0;
  bottom: 0;
}

.examFootercontent {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.examFootercontent .totaldata {
  font-size: 14px;
}

.examFootercontent .totaldata i {
  display: inline-block;
  color: #295cff;
  font-style: normal;
  line-height: 54px;
  padding: 0 3px;
}

.scopednr b {
  display: inline-block;
  font-weight: normal;
  margin: 0 8px;
  color: #1a48db;
  cursor: pointer;
}

.scopednr b:last-child {
  color: #d54941;
}
</style>